<template>
  <view class="bg-gray">
    <view
      class="bg-white w-100 flex justify-center"
      style="position: fixed; top: 0rpx; z-index: 100"
    >
      <view class="flex justify-between pt-2" style="width: 50%">
        <view
          @click="Select(i)"
          class="pb-2"
          :class="
            Active == i ? 'text-' + color + ' ' + 'border-bottom-' + color : ''
          "
          v-for="(item, i) in Topnav"
          :key="i"
        >
          <text>{{ item.title }}</text>
        </view>
      </view>
    </view>
    <!-- 记录 -->
    <view class="flex flex-column p-2" style="margin-top: 84rpx">
      <view v-for="(item, i) in HistoryData" :key="i" class="">
        <view class="my-2">
          <text class="text-muted font-lg">{{ item.Date }}</text>
        </view>
        <view
          @click.stop="goDetail(item_)"
          v-for="(item_, i_) in item.Data"
          :key="i_"
          class="my-2 p-2 flex bg-white"
          style="border-radius: 20rpx; box-shadow: 0 0 5rpx rgba(0, 0, 0, 0.3)"
        >
          <image
            v-if="item_.Group_Type != '0' && item_.Picture_URL != ''"
            style="width: 250rpx; height: 200rpx; border-radius: 20rpx"
            :src="Domain_IMG + item_.Picture_URL"
            mode=""
          >
          </image>
          <view class="flex flex-1 flex-column justify-between">
            <view class="text-ellipsis-2 w-100">
              <text class="font-lg">{{ item_.Group_Name }}</text>
            </view>
            <view class="flex align-center justify-between">
              <view class="flex align-center" :class="'text-' + color">
                <text class="font-weight-bold font-lg"
                  >￥{{ item_.Amount }}/</text
                >
                <text>{{ item_.Unit }}</text>
              </view>
              <view class="">
                <button
                  :loading="loading"
                  @click.stop="Deletehistory(item_, 1)"
                  style="
                    border-radius: 30rpx;
                    height: 60rpx;
                    width: 130rpx;
                    line-height: 60rpx;
                  "
                  class="text-white bg-danger font-sm"
                >
                  {{ loading ? "" : "删除" }}
                </button>
              </view>
            </view>
          </view>
        </view>
      </view>
      <view class="text-center py-2">
        <text>{{ BottomFont }}</text>
        <uni-icons
          v-if="BottomFont == '加载中...'"
          type="spinner-cycle"
        ></uni-icons>
      </view>
      <view
        v-if="tag"
        @click="goTop"
        class="bg-white flex align-center justify-center"
        style="
          width: 120rpx;
          height: 120rpx;
          border-radius: 50%;
          box-shadow: 0 0 15rpx rgba(0, 0, 0, 0.5);
          position: fixed;
          bottom: 150rpx;
          right: 50rpx;
        "
      >
        <image
          style="width: 80%; height: 80%"
          src="https://digital.essc.top/dist/zjl_icon/gotop.png"
          mode=""
        ></image>
      </view>
    </view>
  </view>
</template>

<script>
import { GroupBrowsingAll } from "@/api/history.js";
import {
  GoodsFileInquiry,
  getInquiryIDOriginal,
  getEditAction,
} from "@/api/global.js";
const app = getApp();
export default {
  data() {
    return {
      num: 0,
      Domain_IMG: app.globalData.Domain_IMG,
      BottomFont: "下拉获取更多",
      color: uni.getStorageSync("ThemeColors")
        ? uni.getStorageSync("ThemeColors")
        : "green",
      Active: 0,
      Topnav: [
        {
          title: "采购",
        },
        {
          title: "供应",
        },
      ],
      form: {
        Group_Type: "0", //空全部0是供应1是采购,
        User_Number: uni.getStorageSync("use"),
        page: 1, //页数
        limit: 10, //每页数据条数
        App: true,
      },
      HistoryData: [],
      total: 0,
      options2: [
        {
          text: "取消",
          style: {
            backgroundColor: "#007aff",
          },
        },
        {
          text: "确认",
          style: {
            backgroundColor: "#F56C6C",
          },
        },
      ],
      isOpened: "none",
      scrollTop: 0,
      tag: false,
      timer: null,
      loading: false,
    };
  },
  onPageScroll(res) {
    this.scrollTop = res.scrollTop;
  },
  watch: {
    scrollTop: function (newValue, oldValue) {
      if (newValue > 800) {
        this.tag = true;
      } else {
        this.tag = false;
      }
    },
  },
  onReachBottom() {
    //触底事件
    this.num = 0;
    this.HistoryData.forEach((item) => {
      this.num += item.Data.length;
    });
    console.log(this.num, this.total);
    if (this.num != this.total) {
      //如果未超过所有数则调用请求
      this.form.page++;
      this.throttling();
    } else {
      //反之改变底部字体
      this.BottomFont = "没有更多相关浏览记录了";
      this.tag = true;
    }
  },
  onLoad() {
    this.getList(this.form);
  },
  methods: {
    Select(i) {
      if (this.Active == i) return;
      this.goTop();
      this.Active = i;
      this.HistoryData = [];
      this.num = 0;
      this.form.page = 1;
      this.form.Group_Type = i;
      this.getList(this.form);
    },
    throttling(delay = 500) {
      clearTimeout(this.timer);
      this.timer = setTimeout(() => {
        this.getList(this.form);
      }, delay);
    },
    goTop() {
      uni.pageScrollTo({
        scrollTop: 0,
      });
      this.tag = false;
    },
    goDetail(item) {
      console.log(item);
      if (item.Group_Type == "0") {
        uni.navigateTo({
          url:
            "/pages/Trade/Tradedetails?Group_Seek_Purchase_SerialNumber=" +
            item.Group_SerialNumber
        });
      } else {
        uni.navigateTo({
          url:
            "/pages/Market/MarketDetail?Group_Purchasing_SerialNumber=" +
            item.Group_SerialNumber
        });
      }
    },
    Deletehistory(item) {
      const this_ = this;
      uni.showModal({
        title: "提示",
        content: "确认删除该消息吗？",
        success(res) {
          if (res.confirm) {
            if (!this_.loading) {
              this_.loading = true;
              let data = {
                Data: "group_browsing_info",
                Primary_Key_Name: "Group_Browse_SerialNumber",
                Primary_Key: item.Group_Browse_SerialNumber,
                isNullEnterprise: true,
              };
              this_.getOriginal(data);
            }
          }
          if (res.cancel) {
            this_.loading = false;
            uni.showToast({
              title: "已取消",
              icon: "none",
            });
          }
        },
      });
    },
    async getOriginal(data) {
      const res = await getInquiryIDOriginal({
        data,
      });
      if (res.redirect && res.redirect == "REDIRECT") {
        uni.navigateTo({
          url: "/pages/My/Login",
        });
      }
      res[0].Row_Status = "1";
      let Data = {
        Data: JSON.stringify({
          Modify: {
            group_browsing_info: res,
          },
        }),
        token: uni.getStorageSync("token"),
      };
      this.getEdit(Data);
    },
    async getEdit(data) {
      const res = await getEditAction({
        data,
      });
      if (res.redirect && res.redirect == "REDIRECT") {
        uni.navigateTo({
          url: "/pages/My/Login",
        });
      } else if (res.Status == "success") {
        uni.showToast({
          title: "已删除",
          icon: "success",
        });
        this.loading = false;
        this.HistoryData = [];
        this.form.page = 1;
        this.getList(this.form);
      }
    },
    async getList(data) {
      uni.showLoading({
        title: "加载中...",
      });
      this.BottomFont = "加载中...";
      const res = await GroupBrowsingAll({
        data,
      });
      if (res.redirect && res.redirect == "REDIRECT") {
        uni.navigateTo({
          url: "/pages/My/Login",
        });
      } else if (res.Status == "success") {
        console.log(res.tableData);
        this.HistoryData.push(...res.tableData);
        this.total = Number(res.limit);
        uni.hideLoading();
        this.BottomFont = "下拉加载更多";
      }
    },
  },
};
</script>

<style lang="scss">
</style>